<!DOCTYPE html>
<html lang="en">
<head>

    <!--[if lt IE 9]>
        <style>body {display: none; background: none !important} </style>
        <meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="John Doe" />


    
    


<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">

<link rel="apple-touch-icon" href= "/apple-touch-icon.png">


    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">



    <link rel="shortcut icon" href="/favicon.png">



    <link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">



    <link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">



    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">



<link rel="stylesheet" href="/css/style.css">



    <style> .article { opacity: 0;} </style>


<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">


<title>Hexo</title>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<script>
    var yiliaConfig = {
        fancybox: true,
        animate: true,
        isHome: true,
        isPost: false,
        isArchive: false,
        isTag: false,
        isCategory: false,
        fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        search: 
    }
</script>


    <script>
        yiliaConfig.jquery_ui = [true, "//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js", "//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css"];
    </script>



    <script> yiliaConfig.rootUrl = "\/";</script>






<meta name="generator" content="Hexo 6.3.0"></head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/avatar.jpg" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/"></a></h1>
        </hgroup>

        

        


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>Menu</li>
                        <li>Tags</li>
                        
                        <li>Friends</li>
                        
                        
                        <li>About Me</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签云</a></li>
                        
                            <li><a href="/about/">关于我</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" href="mailto:1356557225@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" href="#" title="GitHub"></a>
                            
                                <a class="fa RSS" href="/atom.xml" title="RSS"></a>
                            
                                <a class="fa CSDN" target="_blank" rel="noopener" href="https://blog.csdn.net/m0_56223760?type=blog" title="CSDN"></a>
                            
                                <a class="fa QQ" href="/1356557225" title="QQ"></a>
                            
                                <a class="fa 微信" href="/mai1356557225" title="微信"></a>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a class="main-nav-link switch-friends-link" target="_blank" rel="noopener" href="https://hexo.io">Hexo</a>
                    
                      <a class="main-nav-link switch-friends-link" target="_blank" rel="noopener" href="https://pages.github.com/">GitHub</a>
                    
                      <a class="main-nav-link switch-friends-link" target="_blank" rel="noopener" href="http://moxfive.xyz/">MOxFIVE</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">专注于前端</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页"></a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/avatar.jpg" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页"></a></h1>
            </hgroup>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签云</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" target="_blank" href="mailto:1356557225@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" target="_blank" href="#" title="GitHub"></a>
                            
                                <a class="fa RSS" target="_blank" href="/atom.xml" title="RSS"></a>
                            
                                <a class="fa CSDN" target="_blank" href="https://blog.csdn.net/m0_56223760?type=blog" title="CSDN"></a>
                            
                                <a class="fa QQ" target="_blank" href="/1356557225" title="QQ"></a>
                            
                                <a class="fa 微信" target="_blank" href="/mai1356557225" title="微信"></a>
                            
                        </ul>
            </nav>
        </header>                
    </div>
    <link class="menu-list" tags="Tags" friends="Friends" about="About Me"/>
</nav>
      <div class="body-wrap">
  
    <article id="post-原生JS在指定div制作一个文件夹管理器" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2023/06/29/%E5%8E%9F%E7%94%9FJS%E5%9C%A8%E6%8C%87%E5%AE%9Adiv%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E7%AE%A1%E7%90%86%E5%99%A8/" class="article-date">
      <time datetime="2023-06-29T04:13:22.000Z" itemprop="datePublished">2023-06-29</time>
</a>


    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2023/06/29/%E5%8E%9F%E7%94%9FJS%E5%9C%A8%E6%8C%87%E5%AE%9Adiv%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%E7%AE%A1%E7%90%86%E5%99%A8/">原生JS在指定div制作一个文件夹管理器</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="如何在指定div制作一个文件夹管理器"><a href="#如何在指定div制作一个文件夹管理器" class="headerlink" title="如何在指定div制作一个文件夹管理器"></a>如何在指定div制作一个文件夹管理器</h1><h2 id="实现效果"><a href="#实现效果" class="headerlink" title="实现效果:"></a>实现效果:</h2><p><img src="https://mai-jingyan.gitee.io/images/%E6%96%87%E4%BB%B6%E7%AE%A1%E7%90%86%E5%99%A8.gif" alt="文件夹管理器"></p>
<h3 id="一、核心文件准备"><a href="#一、核心文件准备" class="headerlink" title="一、核心文件准备"></a>一、核心文件准备</h3><h4 id="js文件"><a href="#js文件" class="headerlink" title="js文件"></a>js文件</h4><table>
<thead>
<tr>
<th>文件名</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>tool.js</td>
<td>用来获取选择的元素</td>
</tr>
<tr>
<td>data.js</td>
<td>存储文件夹数据</td>
</tr>
<tr>
<td>createHtml.js</td>
<td>页面创建</td>
</tr>
<tr>
<td>feature.js</td>
<td>1. 选择相关函数 2. 弹窗相关函数 3. 文件操作相关函数</td>
</tr>
<tr>
<td>view.js</td>
<td>文件功能相关事件</td>
</tr>
</tbody></table>
<p>链接: css,图片等相关文件<a target="_blank" rel="noopener" href="http://www.xiaomaiweb.top/share/%E6%96%87%E4%BB%B6%E5%A4%B9%E7%AE%A1%E7%90%86%E5%99%A8.zip">点击下载</a></p>
<h3 id="二、写入代码"><a href="#二、写入代码" class="headerlink" title="二、写入代码"></a>二、写入代码</h3><h4 id="1-在需要显示的div中加入以下代码"><a href="#1-在需要显示的div中加入以下代码" class="headerlink" title="1. 在需要显示的div中加入以下代码"></a>1. 在需要显示的div中加入以下代码</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!------------------ 功能按键 ------------------------&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;widget-header feature&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;delete-file&quot;</span> &gt;</span>删除<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;new-file&quot;</span> <span class="attr">id</span>=<span class="string">&quot;createfolder&quot;</span>&gt;</span>新建<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!----------------- 文件夹显示区域 --------------------&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tab-content&quot;</span></span></span><br><span class="line"><span class="tag">	&lt;<span class="attr">div</span> <span class="attr">class</span>=<span class="string">&quot;main&quot;</span>&gt;</span></span><br><span class="line">	</span><br><span class="line">		  <span class="comment">&lt;!-- 云盘内容主体区 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		    <span class="comment">&lt;!-- 导航区 --&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">		      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;catalog&quot;</span>&gt;</span></span><br><span class="line">		        首页</span><br><span class="line">		      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		    <span class="comment">&lt;!--/ 导航区 --&gt;</span></span><br><span class="line">		</span><br><span class="line">		    <span class="comment">&lt;!-- 文件内容区 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;wrap-file layout-preview&quot;</span> <span class="attr">id</span>=<span class="string">&quot;file-container&quot;</span> <span class="attr">style</span>=<span class="string">&quot;left: 0px;&quot;</span>&gt;</span></span><br><span class="line">		</span><br><span class="line">		      <span class="comment">&lt;!-- 单个文件夹示例 --&gt;</span></span><br><span class="line">		      <span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">		      	&lt;div class=&quot;file-panel&quot;&gt;</span></span><br><span class="line"><span class="comment">		          &lt;span class=&quot;file-checkbox&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="comment">		          &lt;span class=&quot;file-rename&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="comment">		          &lt;span class=&quot;file-delete&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="comment">		        &lt;/div&gt;</span></span><br><span class="line"><span class="comment">				&lt;div class=&quot;file-img&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="comment">				&lt;div class=&quot;file-info&quot;&gt;New File(1)&lt;/div&gt;</span></span><br><span class="line"><span class="comment">		        &lt;input class=&quot;file-rename-text&quot; type=&quot;text&quot; value=&quot;New File(1)&quot;&gt; </span></span><br><span class="line"><span class="comment">		      --&gt;</span></span><br><span class="line">		      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		    <span class="comment">&lt;!-- 文件夹内容区 --&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!--/ 云盘主体区 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--/ 页面主体部分 --&gt;</span></span><br><span class="line">		<span class="comment">&lt;!-- 弹窗 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;alert-box&quot;</span>&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!-- 消息弹窗 --&gt;</span></span><br><span class="line">		  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;notification&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!--/ 消息弹窗 --&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!-- 咨询弹窗 --&gt;</span></span><br><span class="line">		  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;question-shadow&quot;</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;question&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">strong</span>&gt;</span><span class="tag">&lt;/<span class="name">strong</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>确定<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>取消<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!--/ 咨询弹窗 --&gt;</span></span><br><span class="line">		</span><br><span class="line">		  <span class="comment">&lt;!-- 活动窗 --&gt;</span></span><br><span class="line">		  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;active-window&quot;</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">		    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!--/ 活动窗 --&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!-- 遮罩层 --&gt;</span></span><br><span class="line">		  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;shadow&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		  <span class="comment">&lt;!--/ 遮罩层 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="2-js部分"><a href="#2-js部分" class="headerlink" title="2. js部分"></a>2. js部分</h3><p>（1）data.js</p>
<h5 id="此处可更改为从数据库获取数据，具体格式如下："><a href="#此处可更改为从数据库获取数据，具体格式如下：" class="headerlink" title="此处可更改为从数据库获取数据，具体格式如下："></a>此处可更改为从数据库获取数据，具体格式如下：</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> user_data = &#123;</span><br><span class="line">  <span class="attr">maxId</span>: <span class="number">10</span>,</span><br><span class="line">  <span class="attr">files</span>: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">name</span>: <span class="string">&#x27;Root&#x27;</span>,</span><br><span class="line">      <span class="attr">id</span>: <span class="number">0</span>,</span><br><span class="line">      <span class="attr">type</span>: <span class="string">&#x27;root&#x27;</span>,</span><br><span class="line">      <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">      <span class="attr">time</span>: <span class="string">&#x27;2017-01-01&#x27;</span>,</span><br><span class="line">      <span class="attr">children</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;Front Frame&#x27;</span>,</span><br><span class="line">          <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line">          <span class="attr">pId</span>: <span class="number">0</span>,</span><br><span class="line">          <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">          <span class="attr">time</span>: <span class="string">&#x27;2017-10-02&#x27;</span>,</span><br><span class="line">          <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&#x27;React&#x27;</span>,</span><br><span class="line">              <span class="attr">id</span>: <span class="number">4</span>,</span><br><span class="line">              <span class="attr">pId</span>: <span class="number">1</span>,</span><br><span class="line">              <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">              <span class="attr">time</span>: <span class="string">&#x27;2017-01-03&#x27;</span>,</span><br><span class="line">              <span class="attr">children</span>: []</span><br><span class="line">            &#125;,</span><br><span class="line">            &#123;</span><br><span class="line">              <span class="attr">name</span>: <span class="string">&#x27;Vue&#x27;</span>,</span><br><span class="line">              <span class="attr">id</span>: <span class="number">5</span>,</span><br><span class="line">              <span class="attr">pId</span>: <span class="number">1</span>,</span><br><span class="line">              <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">              <span class="attr">time</span>: <span class="string">&#x27;2017-01-04&#x27;</span>,</span><br><span class="line">              <span class="attr">children</span>: [</span><br><span class="line">                &#123;</span><br><span class="line">                  <span class="attr">name</span>: <span class="string">&#x27;vue-cli&#x27;</span>,</span><br><span class="line">                  <span class="attr">id</span>: <span class="number">6</span>,</span><br><span class="line">                  <span class="attr">pId</span>: <span class="number">5</span>,</span><br><span class="line">                  <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">                  <span class="attr">time</span>: <span class="string">&#x27;2017-01-04&#x27;</span>,</span><br><span class="line">                  <span class="attr">children</span>: []</span><br><span class="line">                &#125;</span><br><span class="line">              ]</span><br><span class="line">            &#125;</span><br><span class="line">          ]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;HTML5&#x27;</span>,</span><br><span class="line">          <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line">          <span class="attr">pId</span>: <span class="number">0</span>,</span><br><span class="line">          <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">          <span class="attr">time</span>: <span class="string">&#x27;2017-01-01&#x27;</span>,</span><br><span class="line">          <span class="attr">children</span>: []</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="attr">name</span>: <span class="string">&#x27;CSS3&#x27;</span>,</span><br><span class="line">          <span class="attr">id</span>: <span class="number">3</span>,</span><br><span class="line">          <span class="attr">pId</span>: <span class="number">0</span>,</span><br><span class="line">          <span class="attr">type</span>:<span class="string">&#x27;folder&#x27;</span>,</span><br><span class="line">          <span class="attr">time</span>: <span class="string">&#x27;2017-05-01&#x27;</span>,</span><br><span class="line">          <span class="attr">children</span>:[]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          name : <span class="string">&#x27;WebDeveloper&#x27;</span>,</span><br><span class="line">          id : <span class="number">7</span>,</span><br><span class="line">          pId : <span class="number">0</span>,</span><br><span class="line">          type : <span class="string">&#x27;image&#x27;</span>,</span><br><span class="line">          src : <span class="string">&#x27;img/data-image/WebDeveloper.gif&#x27;</span>,</span><br><span class="line">          <span class="attr">width</span>: <span class="number">800</span>,</span><br><span class="line">          height :<span class="number">533</span>,</span><br><span class="line">          time : <span class="string">&#x27;2017-03-28&#x27;</span>,</span><br><span class="line">          children :[]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          name : <span class="string">&#x27;WorkHard&#x27;</span>,</span><br><span class="line">          id : <span class="number">8</span>,</span><br><span class="line">          pId : <span class="number">0</span>,</span><br><span class="line">          type : <span class="string">&#x27;image&#x27;</span>,</span><br><span class="line">          src : <span class="string">&#x27;img/data-image/WorkHard.jpg&#x27;</span>,</span><br><span class="line">          <span class="attr">width</span>: <span class="number">1000</span>,</span><br><span class="line">          height :<span class="number">714</span>,</span><br><span class="line">          time : <span class="string">&#x27;2017-06-01&#x27;</span>,</span><br><span class="line">          children :[]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          name : <span class="string">&#x27;BookNotes&#x27;</span>,</span><br><span class="line">          id : <span class="number">9</span>,</span><br><span class="line">          pId : <span class="number">0</span>,</span><br><span class="line">          type : <span class="string">&#x27;note&#x27;</span>,</span><br><span class="line">          time : <span class="string">&#x27;2017-04-28&#x27;</span>,</span><br><span class="line">          children :[]</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;    </span><br><span class="line">  ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="3-createHtml-js"><a href="#3-createHtml-js" class="headerlink" title="3. createHtml.js"></a>3. createHtml.js</h4><p>将数据<code>渲染</code>到页面，然后生成数据目录便于<code>返回上一级文件</code>功能的实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取全局公用元素</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> wrapFiles = tool.$(<span class="string">&#x27;#file-container&#x27;</span>); <span class="comment">//文件内容区</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arrFile = wrapFiles.<span class="property">children</span>; <span class="comment">//文件内容区的 子元素集合</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> allChecked = tool.$(<span class="string">&#x27;.all-in&#x27;</span>); <span class="comment">//全选框</span></span><br><span class="line"><span class="comment">// -------------------------------------------------------------</span></span><br><span class="line"><span class="comment">//获取数据</span></span><br><span class="line"><span class="keyword">var</span> data = user_data.<span class="property">files</span>; <span class="comment">//数据 根目录</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> currentData = data[<span class="number">0</span>].<span class="property">children</span>; <span class="comment">//当前页面显示的文件的数据（初始化为根目录）</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> currentDataId = <span class="number">0</span>; <span class="comment">//当前数据的Id</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// -------------------------------------------------------------</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(currentData);</span><br><span class="line"><span class="comment">//初始化页面</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">initHtml</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">  wrapFiles.<span class="property">innerHTML</span> = <span class="title function_">createFileHtml</span>(currentData);</span><br><span class="line"></span><br><span class="line">  <span class="title function_">addFileEvent</span>();</span><br><span class="line">  <span class="title function_">catalogEvent</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">initHtml</span>();</span><br><span class="line"><span class="comment">//创建文件内容区的HTML结构</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">createFileHtml</span>(<span class="params">data</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">``</span>,</span><br><span class="line">    i, len = data.<span class="property">length</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    str += <span class="string">`&lt;div class=&quot;file&quot; data-id=&quot;<span class="subst">$&#123;data[i].id&#125;</span>&quot;&gt;</span></span><br><span class="line"><span class="string">              &lt;div class=&quot;file-panel&quot;&gt;</span></span><br><span class="line"><span class="string">                &lt;span class=&quot;file-checkbox&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string">                &lt;span class=&quot;file-delete&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string">                &lt;span class=&quot;file-rename&quot;&gt;&lt;/span&gt;</span></span><br><span class="line"><span class="string">              &lt;/div&gt;</span></span><br><span class="line"><span class="string">              &lt;div class=&quot;file-img <span class="subst">$&#123;<span class="string">&#x27;file-type-&#x27;</span> + data[i].type&#125;</span>&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">              &lt;div class=&quot;file-info&quot; title=&quot;<span class="subst">$&#123;data[i].name&#125;</span>&quot;&gt;<span class="subst">$&#123;data[i].name&#125;</span>&lt;/div&gt;</span></span><br><span class="line"><span class="string">              &lt;input class=&quot;file-rename-text&quot; type=&quot;text&quot; value=&quot;<span class="subst">$&#123;data[i].name&#125;</span>&quot; spellcheck=&quot;false&quot;&gt;</span></span><br><span class="line"><span class="string">              &lt;time class=&quot;file-time&quot;&gt;<span class="subst">$&#123;data[i].time&#125;</span>&lt;/time&gt;</span></span><br><span class="line"><span class="string">            &lt;/div&gt;`</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 遍历当前页面显示的所有文件夹</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">addFileEvent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title class_">Array</span>.<span class="title function_">from</span>(arrFile).<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">item</span>) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> itemPanel = tool.$(<span class="string">&#x27;.file-panel&#x27;</span>, item);</span><br><span class="line"></span><br><span class="line">    item.<span class="property">onmouseover</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      itemPanel.<span class="property">style</span>.<span class="property">opacity</span> = <span class="string">&#x27;1&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    item.<span class="property">onmouseout</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      itemPanel.<span class="property">style</span>.<span class="property">opacity</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//生成目录结构</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">catalogEvent</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> catalog = tool.$(<span class="string">&#x27;.catalog&#x27;</span>); <span class="comment">//目录栏</span></span><br><span class="line">  <span class="keyword">var</span> arrCatalog = tool.$(<span class="string">&#x27;a&#x27;</span>, catalog);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrCatalog.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    arrCatalog[i].<span class="property">index</span> = i;</span><br><span class="line">    arrCatalog[i].<span class="property">onclick</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="title function_">fileClick</span>(arrCatalog[<span class="variable language_">this</span>.<span class="property">index</span>].<span class="property">dataset</span>.<span class="property">id</span>);</span><br><span class="line">      <span class="keyword">var</span> fileClickId = arrCatalog[<span class="variable language_">this</span>.<span class="property">index</span>].<span class="property">dataset</span>.<span class="property">id</span> * <span class="number">1</span>;</span><br><span class="line">      <span class="keyword">if</span> (!fileClickId) &#123;</span><br><span class="line">        catalog.<span class="property">innerHTML</span> = <span class="string">&#x27;Root&#x27;</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过id获取对应数据</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getItemDataById</span>(<span class="params">data, id</span>) &#123;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> current = <span class="literal">null</span>,</span><br><span class="line">    i, len = data.<span class="property">length</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (data[i].<span class="property">id</span> === id) &#123;</span><br><span class="line">      current = data[i];</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (!current &amp;&amp; data[i].<span class="property">children</span>.<span class="property">length</span>) &#123;</span><br><span class="line">      current = <span class="title function_">getItemDataById</span>(data[i].<span class="property">children</span>, id);</span><br><span class="line">      <span class="keyword">if</span> (current) <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> current;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过id获取对应祖先数据</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getParentsById</span>(<span class="params">data, id</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> id === <span class="string">&#x27;undefined&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> current = <span class="title function_">getItemDataById</span>(data, id);</span><br><span class="line"></span><br><span class="line">  arr.<span class="title function_">push</span>(current);</span><br><span class="line"></span><br><span class="line">  arr = arr.<span class="title function_">concat</span>(<span class="title function_">getParentsById</span>(data, current.<span class="property">pId</span>));</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过id获取对应子孙数据</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getChildrenById</span>(<span class="params">data, id</span>)&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> id === <span class="string">&#x27;undefined&#x27;</span>) <span class="keyword">return</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arr = [];</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> current = <span class="title function_">getItemDataById</span>(data, id);</span><br><span class="line"></span><br><span class="line">  arr.<span class="title function_">push</span>(current);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> currentChildren = current.<span class="property">children</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (current.<span class="property">children</span>.<span class="property">length</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; currentChildren.<span class="property">length</span>; i++) &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (currentChildren[i].<span class="property">children</span>) &#123;</span><br><span class="line">      arr = arr.<span class="title function_">concat</span>(<span class="title function_">getChildrenById</span>(data,currentChildren[i].<span class="property">id</span>));</span><br><span class="line">    &#125;</span><br><span class="line">   &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">return</span> arr;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-feature-js"><a href="#3-feature-js" class="headerlink" title="3. feature.js"></a>3. feature.js</h4><h4 id="点击文件夹或者图片实现打开文件夹或者显示图片"><a href="#点击文件夹或者图片实现打开文件夹或者显示图片" class="headerlink" title="点击文件夹或者图片实现打开文件夹或者显示图片"></a>点击文件夹或者图片实现打开文件夹或者显示图片</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ---------------------------------------</span></span><br><span class="line"><span class="comment">//移除当前文档的选中状态</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">removeFileChecked</span>(<span class="params"></span>) &#123;</span><br><span class="line">  allChecked.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&#x27;active&#x27;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; currentData.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    currentData[i].<span class="property">checked</span> = <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//进入文件夹功能函数(显示当前数据某个子元素的子集)------------------------------------------------------------------------------------------</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fileClick</span>(<span class="params">dataId</span>) &#123;</span><br><span class="line">  dataId = dataId * <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//去除未进入文件夹时的数据选中</span></span><br><span class="line">  <span class="title function_">removeFileChecked</span>();</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> catalog = tool.$(<span class="string">&#x27;.catalog&#x27;</span>); <span class="comment">//目录栏</span></span><br><span class="line"></span><br><span class="line">  currentData = <span class="title function_">getItemDataById</span>(data, dataId).<span class="property">children</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">``</span>,</span><br><span class="line">    currentParentId; <span class="comment">//当前数据的pId</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> arrAncestor = <span class="title function_">getParentsById</span>(data, dataId);</span><br><span class="line"></span><br><span class="line">  currentDataId = arrAncestor[<span class="number">0</span>].<span class="property">id</span>;</span><br><span class="line">  <span class="comment">//当前页面显示数据的父级pId</span></span><br><span class="line">  <span class="keyword">if</span> (!arrAncestor[<span class="number">1</span>]) &#123;</span><br><span class="line">    currentParentId = <span class="number">0</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    currentParentId = arrAncestor[<span class="number">1</span>].<span class="property">id</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  str = <span class="string">`&lt;a class=&quot;to-parent&quot; href=&quot;javascript:;&quot; data-id=&quot;<span class="subst">$&#123;currentParentId&#125;</span>&quot;&gt;Previous&lt;/a&gt; </span></span><br><span class="line"><span class="string">           &lt;span&gt;|&lt;/span&gt;`</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//生成目录栏数据</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = arrAncestor.<span class="property">length</span> - <span class="number">2</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span><br><span class="line">    str += <span class="string">`&lt;a class=&quot;<span class="subst">$&#123;arrAncestor[i].name&#125;</span>&quot; href=&quot;javascript:;&quot; data-id=&quot;<span class="subst">$&#123;arrAncestor[i].id&#125;</span>&quot;&gt;<span class="subst">$&#123;arrAncestor[i].name&#125;</span>&lt;/a&gt;`</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (i) str += <span class="string">`&lt;span&gt;&gt;&lt;/span&gt;`</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  catalog.<span class="property">innerHTML</span> = str;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">initHtml</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//遮罩层函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">shadow</span>(<span class="params">onOff</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> shadowBox = tool.$(<span class="string">&#x27;.shadow&#x27;</span>),</span><br><span class="line">    main = tool.$(<span class="string">&#x27;.main&#x27;</span>);</span><br><span class="line">  <span class="keyword">if</span> (onOff) &#123;</span><br><span class="line">    main.<span class="property">classList</span>.<span class="title function_">add</span>(<span class="string">&#x27;blur&#x27;</span>);</span><br><span class="line">    shadowBox.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">&#x27;scale(1)&#x27;</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    main.<span class="property">classList</span>.<span class="title function_">remove</span>(<span class="string">&#x27;blur&#x27;</span>);</span><br><span class="line">	shadowBox.<span class="property">style</span>.<span class="property">transform</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fileImage</span>(<span class="params">fileId</span>) &#123;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">shadow</span>(<span class="literal">true</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> dataImage = <span class="title function_">getItemDataById</span>(currentData, fileId),</span><br><span class="line">    wrapImage = tool.$(<span class="string">&#x27;.img-box&#x27;</span>);</span><br><span class="line">  wrapImage.<span class="property">src</span> = dataImage.<span class="property">src</span>;</span><br><span class="line">  tool.<span class="title function_">css</span>(wrapImage, &#123;</span><br><span class="line">    <span class="attr">width</span>: dataImage.<span class="property">width</span>,</span><br><span class="line">    <span class="attr">height</span>: dataImage.<span class="property">height</span></span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  wrapImage.<span class="property">style</span>.<span class="property">left</span> = <span class="variable language_">window</span>.<span class="property">innerWidth</span> / <span class="number">2</span> - dataImage.<span class="property">width</span> / <span class="number">2</span> + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">  wrapImage.<span class="property">style</span>.<span class="property">top</span> = <span class="variable language_">window</span>.<span class="property">innerHeight</span> / <span class="number">2</span> - dataImage.<span class="property">height</span> / <span class="number">2</span> + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line"></span><br><span class="line">  tool.<span class="title function_">animate</span>(wrapImage, &#123;</span><br><span class="line">    <span class="attr">scale</span>: <span class="number">1</span></span><br><span class="line">  &#125;, <span class="number">100</span>);</span><br><span class="line"></span><br><span class="line">  wrapImage.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">shadow</span>(<span class="literal">false</span>);</span><br><span class="line">    tool.<span class="title function_">animate</span>(wrapImage, &#123;</span><br><span class="line">      <span class="attr">scale</span>: <span class="number">0</span></span><br><span class="line">    &#125;, <span class="number">50</span>);</span><br><span class="line">  &#125;)</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="4-view-js"><a href="#4-view-js" class="headerlink" title="4. view.js"></a>4. view.js</h2><h5 id="处理各种相关事件的功能，比如点击文件夹，通过此处来跳转到相对应的功能函数"><a href="#处理各种相关事件的功能，比如点击文件夹，通过此处来跳转到相对应的功能函数" class="headerlink" title="处理各种相关事件的功能，比如点击文件夹，通过此处来跳转到相对应的功能函数"></a>处理各种相关事件的功能，比如点击文件夹，通过此处来跳转到相对应的功能函数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// -----------------------------------------------------------------------------------------------</span></span><br><span class="line"><span class="comment">//点击文件的相关事件</span></span><br><span class="line">wrapFiles.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> target = e.<span class="property">target</span>,</span><br><span class="line">    targetCls = target.<span class="property">classList</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//获取点击的文件节点以及他的ID</span></span><br><span class="line">  <span class="keyword">var</span> fileGrandparent = target.<span class="property">parentNode</span>.<span class="property">parentNode</span>,</span><br><span class="line">    fileId = fileGrandparent.<span class="property">dataset</span>.<span class="property">id</span> * <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//文件勾选功能------------------------------------------------------</span></span><br><span class="line">  <span class="keyword">if</span> (targetCls.<span class="title function_">contains</span>(<span class="string">&#x27;file-checkbox&#x27;</span>)) &#123;</span><br><span class="line">    <span class="keyword">var</span> dataChecked = <span class="title function_">getItemDataById</span>(data, fileId),</span><br><span class="line">      onOff = !dataChecked.<span class="property">checked</span>;</span><br><span class="line">    <span class="title function_">changeCheckedbox</span>(fileGrandparent, target, dataChecked, onOff);</span><br><span class="line">    <span class="title function_">eventAllChecked</span>();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//重命名功能--------------------------------------------------------</span></span><br><span class="line">  <span class="keyword">if</span> (targetCls.<span class="title function_">contains</span>(<span class="string">&#x27;file-rename&#x27;</span>)) &#123;</span><br><span class="line">    <span class="title function_">fileRename</span>(fileId,fileGrandparent);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//删除文件功能----------------------------------------------------------</span></span><br><span class="line">  <span class="keyword">if</span> (targetCls.<span class="title function_">contains</span>(<span class="string">&#x27;file-delete&#x27;</span>)) &#123;</span><br><span class="line">    <span class="title function_">fileDeleteUnchecked</span>(fileId);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//进入文件夹----------------------------------------------------------</span></span><br><span class="line">  <span class="keyword">if</span> (targetCls.<span class="title function_">contains</span>(<span class="string">&#x27;file-img&#x27;</span>)) &#123;</span><br><span class="line">    fileId = target.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span> * <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">var</span> fileType = <span class="title function_">getItemDataById</span>(currentData,fileId).<span class="property">type</span>;</span><br><span class="line">    <span class="keyword">if</span> ( fileType === <span class="string">&#x27;folder&#x27;</span>) &#123;</span><br><span class="line">      <span class="title function_">fileClick</span>(fileId);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (fileType === <span class="string">&#x27;image&#x27;</span>) &#123;</span><br><span class="line">      <span class="title function_">fileImage</span>(fileId);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//点击文件名重命名------------------------------------------------------</span></span><br><span class="line">  <span class="keyword">if</span> (targetCls.<span class="title function_">contains</span>(<span class="string">&#x27;file-info&#x27;</span>)) &#123;</span><br><span class="line">    <span class="keyword">var</span> timerRename = <span class="built_in">setTimeout</span>(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="title function_">fileRename</span>(target.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span>*<span class="number">1</span>,target.<span class="property">parentNode</span>);</span><br><span class="line">    &#125;,<span class="number">400</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="以上js文件可按需求更改代码，tool文件固定即可"><a href="#以上js文件可按需求更改代码，tool文件固定即可" class="headerlink" title="以上js文件可按需求更改代码，tool文件固定即可"></a>以上js文件可按需求更改代码，tool文件固定即可</h3><h4 id="5-tool-js"><a href="#5-tool-js" class="headerlink" title="5. tool.js"></a>5. tool.js</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br><span class="line">359</span><br><span class="line">360</span><br><span class="line">361</span><br><span class="line">362</span><br><span class="line">363</span><br><span class="line">364</span><br><span class="line">365</span><br><span class="line">366</span><br><span class="line">367</span><br><span class="line">368</span><br><span class="line">369</span><br><span class="line">370</span><br><span class="line">371</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 用来获取选择的元素</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> tool = &#123;&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 元素选择器</span></span><br><span class="line">tool.<span class="property">$</span> = <span class="keyword">function</span> (<span class="params">selector, context</span>)&#123;</span><br><span class="line">  <span class="keyword">var</span> context = context || <span class="variable language_">document</span>;</span><br><span class="line">  <span class="keyword">var</span> first = selector.<span class="title function_">substr</span>(<span class="number">0</span>, <span class="number">1</span>);</span><br><span class="line">  <span class="keyword">var</span> len = selector.<span class="title function_">split</span>(<span class="string">&#x27; &#x27;</span>).<span class="property">length</span>; <span class="comment">// join</span></span><br><span class="line">  <span class="keyword">var</span> eles;</span><br><span class="line">  <span class="comment">// 如果是id选择器</span></span><br><span class="line">  <span class="comment">// console.log(first === &#x27;#&#x27; &amp;&amp; len === 1);</span></span><br><span class="line">  <span class="keyword">if</span>(first === <span class="string">&#x27;#&#x27;</span> &amp;&amp; len === <span class="number">1</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(selector.<span class="title function_">substr</span>(<span class="number">1</span>));</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 如果是CSS选择器</span></span><br><span class="line">  eles = context.<span class="title function_">querySelectorAll</span>(selector);</span><br><span class="line">  <span class="keyword">return</span> eles.<span class="property">length</span> === <span class="number">1</span> ? eles[<span class="number">0</span>] : <span class="title class_">Array</span>.<span class="title function_">from</span>(eles);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 获取或者设置一个DOM元素的innerHTML</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">tool.<span class="property">html</span> = <span class="keyword">function</span> <span class="title function_">html</span>(<span class="params">ele, val</span>)&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> val === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> ele.<span class="property">innerHTML</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  ele.<span class="property">innerHTML</span> = val;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 获取或者设置一个元素的value</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">tool.<span class="property">val</span> = <span class="keyword">function</span> <span class="title function_">val</span>(<span class="params">ele, value</span>)&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> ele.<span class="property">value</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  ele.<span class="property">value</span> = value;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断某个元素是否有某个class</span></span><br><span class="line">tool.<span class="property">hasClass</span> = <span class="keyword">function</span> (<span class="params">ele, cls</span>)&#123;</span><br><span class="line">  <span class="keyword">return</span> ele.<span class="property">classList</span>.<span class="title function_">contains</span>(cls);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 给某个元素添加一个class</span></span><br><span class="line">tool.<span class="property">addClass</span> = <span class="keyword">function</span> (<span class="params">ele, cls</span>)&#123;</span><br><span class="line">  ele.<span class="property">classList</span>.<span class="title function_">add</span>(cls);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 给某个元素删除某个class</span></span><br><span class="line">tool.<span class="property">rmClass</span> = <span class="keyword">function</span> (<span class="params">ele, cls</span>)&#123;</span><br><span class="line">  ele.<span class="property">classList</span>.<span class="title function_">remove</span>(cls);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 给某个元素toggle某个class</span></span><br><span class="line">tool.<span class="property">toggleClass</span> = <span class="keyword">function</span> (<span class="params">ele, cls</span>)&#123;</span><br><span class="line">  ele.<span class="property">classList</span>.<span class="title function_">toggle</span>(cls);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 用来获取和设置元素的css样式</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">tool.<span class="property">css</span> = <span class="keyword">function</span> <span class="title function_">css</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="keyword">var</span> args = <span class="variable language_">arguments</span>, ele = args[<span class="number">0</span>], type = args[<span class="number">1</span>], value = args[<span class="number">2</span>], len = args.<span class="property">length</span>, ret, _this = <span class="variable language_">this</span>;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(len === <span class="number">2</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(type === <span class="string">&#x27;&#x27;</span>)&#123;</span><br><span class="line">      ele.<span class="property">style</span>.<span class="property">cssText</span> = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> type === <span class="string">&#x27;string&#x27;</span>)&#123;</span><br><span class="line">      <span class="keyword">if</span>(<span class="title function_">getTransform</span>(type))&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">cssTransform</span>(ele, type);</span><br><span class="line">      &#125;</span><br><span class="line">      </span><br><span class="line">      ret = <span class="title function_">getComputedStyle</span>(ele)[type];</span><br><span class="line">      <span class="keyword">if</span>(<span class="title function_">getStyle</span>(type))&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">parseFloat</span>(ret);</span><br><span class="line">      &#125;;</span><br><span class="line">      <span class="keyword">return</span> ret * <span class="number">1</span> ? ret * <span class="number">1</span> : ret;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> type === <span class="string">&#x27;object&#x27;</span>)&#123;</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> type)&#123;</span><br><span class="line">        <span class="title function_">setStyle</span>(key, type[key]);</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(len === <span class="number">3</span>)&#123;</span><br><span class="line">    <span class="title function_">setStyle</span>(type, value);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">setStyle</span>(<span class="params">attr, value</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="title function_">getStyle</span>(attr) &amp;&amp; <span class="keyword">typeof</span> value === <span class="string">&#x27;string&#x27;</span>)&#123;</span><br><span class="line">      ele.<span class="property">style</span>[attr] = value;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="title function_">getStyle</span>(attr))&#123;</span><br><span class="line">      ele.<span class="property">style</span>[attr] = <span class="built_in">parseFloat</span>(value) + <span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span> <span class="keyword">if</span>(<span class="title function_">getTransform</span>(attr))&#123;</span><br><span class="line">      _this.<span class="title function_">cssTransform</span>(ele, attr, value);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      ele.<span class="property">style</span>[attr] = value;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">getStyle</span>(<span class="params">type</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> type === <span class="string">&#x27;width&#x27;</span> ||  type === <span class="string">&#x27;height&#x27;</span>|| type === <span class="string">&#x27;left&#x27;</span> || type === <span class="string">&#x27;top&#x27;</span> || type === <span class="string">&#x27;right&#x27;</span> || type === <span class="string">&#x27;bottom&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">getTransform</span>(<span class="params">type</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> type === <span class="string">&#x27;translateX&#x27;</span> ||  type === <span class="string">&#x27;translateY&#x27;</span>|| type === <span class="string">&#x27;rotate&#x27;</span> || type === <span class="string">&#x27;rotateX&#x27;</span> || type === <span class="string">&#x27;rotateY&#x27;</span> || type === <span class="string">&#x27;scale&#x27;</span> || type === <span class="string">&#x27;scaleX&#x27;</span> || type === <span class="string">&#x27;scaleY&#x27;</span> || type === <span class="string">&#x27;skewX&#x27;</span> || type === <span class="string">&#x27;skewY&#x27;</span> || type === <span class="string">&#x27;translate&#x27;</span> || type === <span class="string">&#x27;skew&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 必须通过这个函数设置的才能通过这个函数获取</span></span><br><span class="line">tool.<span class="property">cssTransform</span> = <span class="keyword">function</span> <span class="title function_">cssTransform</span>(<span class="params">ele, type, value</span>)&#123;</span><br><span class="line">  <span class="keyword">var</span> attrs = ele.<span class="property">__transform</span> = ele.<span class="property">__transform</span> || &#123;&#125;, str = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> value === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">    <span class="keyword">return</span> attrs[type];</span><br><span class="line">  &#125;</span><br><span class="line">  attrs[type] = value;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> attrs)&#123;</span><br><span class="line">    <span class="keyword">switch</span>(key)&#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;translateX&#x27;</span>:</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;translateY&#x27;</span>:</span><br><span class="line">        str += <span class="string">` <span class="subst">$&#123;key&#125;</span>(<span class="subst">$&#123;<span class="built_in">parseFloat</span>(attrs[key])&#125;</span>px)`</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;rotate&#x27;</span>:</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;rotateX&#x27;</span>:</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;rotateY&#x27;</span>:</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;skewX&#x27;</span>:</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&#x27;skewY&#x27;</span>:</span><br><span class="line">        str += <span class="string">` <span class="subst">$&#123;key&#125;</span>(<span class="subst">$&#123;<span class="built_in">parseFloat</span>(attrs[key])&#125;</span>deg)`</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">      <span class="attr">default</span>:</span><br><span class="line">        str += <span class="string">` <span class="subst">$&#123;key&#125;</span>(<span class="subst">$&#123;attrs[key]&#125;</span>)`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  ele.<span class="property">style</span>.<span class="property">transform</span> = str.<span class="title function_">trim</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 动画函数</span></span><br><span class="line">tool.<span class="property">animate</span> = <span class="keyword">function</span> <span class="title function_">animate</span>(<span class="params">ele, attrs, duration, fx, fn</span>)&#123;</span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> duration === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">    duration = <span class="number">500</span>;</span><br><span class="line">    fx = <span class="string">&#x27;linear&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> duration === <span class="string">&#x27;number&#x27;</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> fx === <span class="string">&#x27;function&#x27;</span>)&#123;</span><br><span class="line">      fn = fx;</span><br><span class="line">      fx = <span class="string">&#x27;linear&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> fx === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">      fx = <span class="string">&#x27;linear&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> duration === <span class="string">&#x27;function&#x27;</span>)&#123;</span><br><span class="line">    fn = duration;</span><br><span class="line">    fx = <span class="string">&#x27;linear&#x27;</span>;</span><br><span class="line">    duration = <span class="number">500</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">if</span>(<span class="keyword">typeof</span> duration === <span class="string">&#x27;string&#x27;</span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> fx === <span class="string">&#x27;undefined&#x27;</span>)&#123;</span><br><span class="line">      fx = duration;</span><br><span class="line">      duration = <span class="number">500</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      fn = fx;</span><br><span class="line">      fx = duration;</span><br><span class="line">      duration = <span class="number">500</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">var</span> beginValue = &#123;&#125;, changeValue = &#123;&#125;;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> attrs)&#123;</span><br><span class="line">    beginValue[key] = <span class="variable language_">this</span>.<span class="title function_">css</span>(ele, key) || <span class="number">0</span>;</span><br><span class="line">    changeValue[key] = attrs[key] - beginValue[key];</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">var</span> d = duration;</span><br><span class="line">  <span class="keyword">var</span> startTime = <span class="title class_">Date</span>.<span class="title function_">now</span>();</span><br><span class="line">  <span class="keyword">var</span> current, c, b, t, _this = <span class="variable language_">this</span>;</span><br><span class="line">  </span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">cancelAnimationFrame</span>(ele.<span class="property">animate</span>);</span><br><span class="line">  </span><br><span class="line">  (<span class="keyword">function</span> <span class="title function_">animate</span>(<span class="params"></span>)&#123;</span><br><span class="line">    ele.<span class="property">animate</span> = <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(animate, ele);</span><br><span class="line">    </span><br><span class="line">    t = <span class="title class_">Date</span>.<span class="title function_">now</span>() - startTime;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span>(t &gt;= d)&#123;</span><br><span class="line">      t = d;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="title function_">cancelAnimationFrame</span>(ele.<span class="property">animate</span>);</span><br><span class="line">      ele.<span class="property">animate</span> = <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">for</span>(key <span class="keyword">in</span> changeValue)&#123;</span><br><span class="line">      c = changeValue[key];</span><br><span class="line">      b = beginValue[key];</span><br><span class="line">      current = <span class="title class_">Tween</span>[fx](t, b, c, d);</span><br><span class="line">      _this.<span class="title function_">css</span>(ele, key, current);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span>(!ele.<span class="property">animate</span> &amp;&amp; <span class="keyword">typeof</span> fn === <span class="string">&#x27;function&#x27;</span>)&#123;</span><br><span class="line">      fn.<span class="title function_">call</span>(ele);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//抖函数</span></span><br><span class="line">tool.<span class="property">shake</span> = <span class="keyword">function</span> <span class="title function_">shake</span>(<span class="params">ele, attr, nums, fn</span>)&#123;</span><br><span class="line">  <span class="keyword">if</span>(ele.<span class="property">shake</span>) <span class="keyword">return</span>;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">var</span> arr = [], index = <span class="number">0</span>, _this = <span class="variable language_">this</span>;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">var</span> i=nums &lt; <span class="number">10</span> ? <span class="number">10</span> : nums; i&gt;=<span class="number">0</span>; i--)&#123;</span><br><span class="line">    <span class="keyword">if</span>(i == <span class="number">0</span>)&#123;</span><br><span class="line">      arr.<span class="title function_">push</span>(i);</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    arr.<span class="title function_">push</span>(-i, i);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  (<span class="keyword">function</span> <span class="title function_">shake</span>(<span class="params"></span>)&#123;</span><br><span class="line">    ele.<span class="property">shake</span> = <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(shake, ele);</span><br><span class="line">    _this.<span class="title function_">css</span>(ele, attr, arr[index++]);</span><br><span class="line">    <span class="keyword">if</span>(index === arr.<span class="property">length</span>) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="title function_">cancelAnimationFrame</span>(ele.<span class="property">shake</span>);</span><br><span class="line">      ele.<span class="property">shake</span> = <span class="literal">null</span>;</span><br><span class="line">      <span class="keyword">if</span>(<span class="keyword">typeof</span> fn === <span class="string">&#x27;function&#x27;</span>)&#123;</span><br><span class="line">        fn.<span class="title function_">call</span>(ele);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Tween</span> = &#123;</span><br><span class="line">	<span class="attr">linear</span>: <span class="keyword">function</span> (<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//匀速</span></span><br><span class="line">		<span class="keyword">return</span> c*t/d + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeIn</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//加速曲线</span></span><br><span class="line">		<span class="keyword">return</span> c*(t/=d)*t + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeOut</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//减速曲线</span></span><br><span class="line">		<span class="keyword">return</span> -c *(t/=d)*(t-<span class="number">2</span>) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeBoth</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//加速减速曲线</span></span><br><span class="line">		<span class="keyword">if</span> ((t/=d/<span class="number">2</span>) &lt; <span class="number">1</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> c/<span class="number">2</span>*t*t + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> -c/<span class="number">2</span> * ((--t)*(t-<span class="number">2</span>) - <span class="number">1</span>) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeInStrong</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//加加速曲线</span></span><br><span class="line">		<span class="keyword">return</span> c*(t/=d)*t*t*t + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeOutStrong</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//减减速曲线</span></span><br><span class="line">		<span class="keyword">return</span> -c * ((t=t/d-<span class="number">1</span>)*t*t*t - <span class="number">1</span>) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">easeBothStrong</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;  <span class="comment">//加加速减减速曲线</span></span><br><span class="line">		<span class="keyword">if</span> ((t/=d/<span class="number">2</span>) &lt; <span class="number">1</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> c/<span class="number">2</span>*t*t*t*t + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> -c/<span class="number">2</span> * ((t-=<span class="number">2</span>)*t*t*t - <span class="number">2</span>) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">elasticIn</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, a, p</span>)&#123;  <span class="comment">//正弦衰减曲线（弹动渐入）</span></span><br><span class="line">		<span class="keyword">if</span> (t === <span class="number">0</span>) &#123; </span><br><span class="line">			<span class="keyword">return</span> b; </span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> ( (t /= d) == <span class="number">1</span> ) &#123;</span><br><span class="line">			<span class="keyword">return</span> b+c; </span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (!p) &#123;</span><br><span class="line">			p=d*<span class="number">0.3</span>; </span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (!a || a &lt; <span class="title class_">Math</span>.<span class="title function_">abs</span>(c)) &#123;</span><br><span class="line">			a = c; </span><br><span class="line">			<span class="keyword">var</span> s = p/<span class="number">4</span>;</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">var</span> s = p/(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>) * <span class="title class_">Math</span>.<span class="property">asin</span> (c/a);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> -(a*<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>,<span class="number">10</span>*(t-=<span class="number">1</span>)) * <span class="title class_">Math</span>.<span class="title function_">sin</span>( (t*d-s)*(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>)/p )) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">elasticOut</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, a, p</span>)&#123;    <span class="comment">//*正弦增强曲线（弹动渐出）</span></span><br><span class="line">		<span class="keyword">if</span> (t === <span class="number">0</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> ( (t /= d) == <span class="number">1</span> ) &#123;</span><br><span class="line">			<span class="keyword">return</span> b+c;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (!p) &#123;</span><br><span class="line">			p=d*<span class="number">0.3</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (!a || a &lt; <span class="title class_">Math</span>.<span class="title function_">abs</span>(c)) &#123;</span><br><span class="line">			a = c;</span><br><span class="line">			<span class="keyword">var</span> s = p / <span class="number">4</span>;</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">var</span> s = p/(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>) * <span class="title class_">Math</span>.<span class="property">asin</span> (c/a);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> a*<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>,-<span class="number">10</span>*t) * <span class="title class_">Math</span>.<span class="title function_">sin</span>( (t*d-s)*(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>)/p ) + c + b;</span><br><span class="line">	&#125;,    </span><br><span class="line">	<span class="attr">elasticBoth</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, a, p</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span> (t === <span class="number">0</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> ( (t /= d/<span class="number">2</span>) == <span class="number">2</span> ) &#123;</span><br><span class="line">			<span class="keyword">return</span> b+c;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (!p) &#123;</span><br><span class="line">			p = d*(<span class="number">0.3</span>*<span class="number">1.5</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> ( !a || a &lt; <span class="title class_">Math</span>.<span class="title function_">abs</span>(c) ) &#123;</span><br><span class="line">			a = c; </span><br><span class="line">			<span class="keyword">var</span> s = p/<span class="number">4</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">else</span> &#123;</span><br><span class="line">			<span class="keyword">var</span> s = p/(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>) * <span class="title class_">Math</span>.<span class="property">asin</span> (c/a);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (t &lt; <span class="number">1</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> - <span class="number">0.5</span>*(a*<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>,<span class="number">10</span>*(t-=<span class="number">1</span>)) * </span><br><span class="line">					<span class="title class_">Math</span>.<span class="title function_">sin</span>( (t*d-s)*(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>)/p )) + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> a*<span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">2</span>,-<span class="number">10</span>*(t-=<span class="number">1</span>)) * </span><br><span class="line">				<span class="title class_">Math</span>.<span class="title function_">sin</span>( (t*d-s)*(<span class="number">2</span>*<span class="title class_">Math</span>.<span class="property">PI</span>)/p )*<span class="number">0.5</span> + c + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">backIn</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, s</span>)&#123;     <span class="comment">//回退加速（回退渐入）</span></span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">typeof</span> s == <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">		   s = <span class="number">1.70158</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> c*(t/=d)*t*((s+<span class="number">1</span>)*t - s) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">backOut</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, s</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">typeof</span> s == <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">			s = <span class="number">3.70158</span>;  <span class="comment">//回缩的距离</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> c*((t=t/d-<span class="number">1</span>)*t*((s+<span class="number">1</span>)*t + s) + <span class="number">1</span>) + b;</span><br><span class="line">	&#125;, </span><br><span class="line">	<span class="attr">backBoth</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d, s</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="keyword">typeof</span> s == <span class="string">&#x27;undefined&#x27;</span>) &#123;</span><br><span class="line">			s = <span class="number">1.70158</span>; </span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> ((t /= d/<span class="number">2</span> ) &lt; <span class="number">1</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> c/<span class="number">2</span>*(t*t*(((s*=(<span class="number">1.525</span>))+<span class="number">1</span>)*t - s)) + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> c/<span class="number">2</span>*((t-=<span class="number">2</span>)*t*(((s*=(<span class="number">1.525</span>))+<span class="number">1</span>)*t + s) + <span class="number">2</span>) + b;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">bounceIn</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;    <span class="comment">//弹球减振（弹球渐出）</span></span><br><span class="line">		<span class="keyword">return</span> c - <span class="title class_">Tween</span>[<span class="string">&#x27;bounceOut&#x27;</span>](d-t, <span class="number">0</span>, c, d) + b;</span><br><span class="line">	&#125;,       </span><br><span class="line">	<span class="attr">bounceOut</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;<span class="comment">//*</span></span><br><span class="line">		<span class="keyword">if</span> ((t/=d) &lt; (<span class="number">1</span>/<span class="number">2.75</span>)) &#123;</span><br><span class="line">			<span class="keyword">return</span> c*(<span class="number">7.5625</span>*t*t) + b;</span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span> (t &lt; (<span class="number">2</span>/<span class="number">2.75</span>)) &#123;</span><br><span class="line">			<span class="keyword">return</span> c*(<span class="number">7.5625</span>*(t-=(<span class="number">1.5</span>/<span class="number">2.75</span>))*t + <span class="number">0.75</span>) + b;</span><br><span class="line">		&#125; <span class="keyword">else</span> <span class="keyword">if</span> (t &lt; (<span class="number">2.5</span>/<span class="number">2.75</span>)) &#123;</span><br><span class="line">			<span class="keyword">return</span> c*(<span class="number">7.5625</span>*(t-=(<span class="number">2.25</span>/<span class="number">2.75</span>))*t + <span class="number">0.9375</span>) + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> c*(<span class="number">7.5625</span>*(t-=(<span class="number">2.625</span>/<span class="number">2.75</span>))*t + <span class="number">0.984375</span>) + b;</span><br><span class="line">	&#125;,      </span><br><span class="line">	<span class="attr">bounceBoth</span>: <span class="keyword">function</span>(<span class="params">t, b, c, d</span>)&#123;</span><br><span class="line">		<span class="keyword">if</span> (t &lt; d/<span class="number">2</span>) &#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="title class_">Tween</span>[<span class="string">&#x27;bounceIn&#x27;</span>](t*<span class="number">2</span>, <span class="number">0</span>, c, d) * <span class="number">0.5</span> + b;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> <span class="title class_">Tween</span>[<span class="string">&#x27;bounceOut&#x27;</span>](t*<span class="number">2</span>-d, <span class="number">0</span>, c, d) * <span class="number">0.5</span> + c*<span class="number">0.5</span> + b;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>以上仅提供js核心技术，部分删除新增文件夹等功能请查看下篇文章<br>本文技术参考于github，由于太久了找不到原作者就不@了<br>希望本文对你有所帮助</p>
</blockquote>

      
    </div>
    
    <div class="article-info article-info-index">
      
      

      
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
  
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                <i class="fa fa-copyright"></i> 
                2016-2023 John Doe
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="A fast, simple &amp; powerful blog framework">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="Another simple and elegant theme for Hexo  v3.5">Yelee</a> by MOxFIVE <i class="fa fa-heart animated infinite pulse"></i>
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" title="Site Visitors"><i class="fa fa-user" aria-hidden="true"></i><span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>| </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit"  title="Page Hits"><i class="fa fa-eye animated infinite pulse" aria-hidden="true"></i><span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>





<div class="scroll" id="scroll">
    <a href="#" title="Back to Top"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="load$hide();" title="Comments"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="Go to Bottom"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        var oOpenInNew = {
            
             title: "a.article-title, .article-more-link a", 
             post: ".article-entry a[href], .copyright a[href]", 
             tags: ".article-tag a", 
             categories: ".article-category a, a.tag-list-link", 
             articleNav: "#article-nav a, #post-nav-button a", 
             archives: ".archive-article-title", 
             miniArchives: "a.post-list-link", 
            
            
             socail: ".social a" 
        }
        for (var x in oOpenInNew) {
            $(oOpenInNew[x]).attr("target", "_blank");
        }
    
</script>

    <script>
        var originTitle = document.title;
        var titleTime;
        document.addEventListener("visibilitychange", function() {
            if (document.hidden) {
                document.title = "(つェ⊂) 我藏好了哦~ " + originTitle;
                clearTimeout(titleTime);
            }
            else {
                document.title = "(*´∇｀*) 被你发现啦~ " + originTitle;
                titleTime = setTimeout(function() {
                    document.title = originTitle;
                }, 2000);
            }
        })
    </script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
</body>
</html>